<template>
  <div class="content">

    <div class="head">
      <div class="head-left">縂賬戶資產折合(USDT)</div>
      <div class="head-right">≈&nbsp;{{allMoney}}</div>
    </div>
    <router-link to="/transfe">
    <div class="money">
      <div class="money-top" @click='zan' :data-id='1'>
        <div class="top-left">BTC</div>
        <div class="top-right">></div>
      </div>
      <div class="money-bottom">
        <div class="bottom-left">可用&nbsp;{{freeBtc.toFixed(8)}}</div>
        <div class="bottom-right">凍結&nbsp;{{coldBtc.toFixed(8)}}</div>
      </div>
    </div>
      </router-link>
        <router-link to="/transfe">
    <div class="money">
      <div class="money-top">
        <div class="top-left">ETH</div>
        <div class="top-right">></div>
      </div>
      <div class="money-bottom">
        <div class="bottom-left">可用&nbsp;{{freeEth.toFixed(8)}}</div>
        <div class="bottom-right">凍結&nbsp;{{coldEth.toFixed(8)}}</div>
      </div>
    </div>
          </router-link>
        <router-link to="/transfe">
    <div class="money" >
      <div class="money-top">
        <div class="top-left">USDT</div>
        <div class="top-right">></div>
      </div>
      <div class="money-bottom">
        <div class="bottom-left">可用&nbsp;{{freeUsdt.toFixed(8)}}</div>
        <div class="bottom-right">凍結&nbsp;{{coldUsdt.toFixed(8)}}</div>
      </div>
    </div>
          </router-link>
    <tabar :isCheck="2"></tabar>
  </div>

</template>

<script>
  import {curreny} from "../../api/curreny";
  import Tabar from '../../components/tabbar';
    export default {
    name: "my",
      data(){
        return{
          userInfo:{},
          allMoney:0.00000000,
          moneyList:{},
          // 可用资产
          freeBtc:0.00000000,
          freeUsdt:0.00000000,
          freeEth:0.00000000,
          // 冻结资产
          coldBtc:0.00000000,
          coldUsdt:0.00000000,
          coldEth:0.00000000,

        }
      },
      components:{
        Tabar
      },


      methods: {
        zan(e) {

            var target = e.target;
            console.log(target)
         },
        },

      mounted() {
          if (!window.localStorage.getItem('userInfo')) {
              this.$router.push({path:'/'})
          }else {
            this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            console.log(this.userInfo);
            curreny({
              uid:this.userInfo.uid
            }).then((data)=>{
              if (data.errorCode==0){
                if (data.data.myMoney==''){
                  this.allMoney=data.data.usermoney
                }else {
                  this.coldBtc=data.data.myMoney.btc_exchangerate;
                  this.coldEth=data.data.myMoney.eth_exchangerate;
                  this.coldUsdt=data.data.myMoney.usdt_exchangerate;
                  this.freeBtc=data.data.myMoney.btc_freeze;
                  this.freeEth=data.data.myMoney.eth_freeze;
                  this.freeUsdt=data.data.myMoney.usdt_freeze;
                  this.allMoney=this.freeEth+this.freeBtc+this.freeUsdt;
                }
              }else {

              }
            })
          }

      }
    }
</script>

<style scoped lang="scss">
  .head {
    width: 100%;
    height: 120px;
    background-color: #4681f5;
    display: flex;
  }

  .head-left {
    display: flex;
    font-size: 12px;
    color: #eee;
    position: absolute;
    left: 20px;
    top: 30px;
  }

  .head-right {
    position: absolute;
    left: 20px;
    top: 60px;
    font-size: 18px;
    color: white;
  }

  .money {
    display: flex;
    flex-direction: column;
    width: 96%;
    height: 80px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
    margin-left: 1%;
    margin-top: 10px;
  }

  .money-top {
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    width: 90%;
    margin-top: 10px;
    font-size: 16px;
  }

  .top-left {
    font-weight: bold;
  }

  .top-right {
    margin-left: 86%;
  }

  .money-bottom {
    display: flex;
    flex-direction: row;
    width: 90%;
    font-size: 13px;
    margin-top: 8px;
  }

  .bottom-left {
    margin-left: 6%;
    width: 40%;
  }

  .bottom-right {
    width: 40%;
    margin-left: 30%;
  }
</style>
